feat: add keyboard shortcut reference panel#908
Conversation
|
@Prashant-kumar-8312 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel. A member of the Team first needs to authorize it. |
👋 Thanks for your PR, @Prashant-kumar-8312!Welcome to Reframe — a browser-based video editor built for everyone 🎬
What happens next
Quick checklist
Useful links
Happy coding! 🎉 |
✅ PR Format Check Passed — @Prashant-kumar-8312Basic format checks passed. A maintainer will review your code changes. This does not mean the PR is approved — it just means the format is correct. |
|
@Prashant-kumar-8312 This PR adds a useful keyboard shortcut reference panel. However:
Steps: git fetch upstream
git rebase upstream/main
git push --force-with-lease origin feat/shortcut-key-panelOnce rebased and CI passes, this will be reviewed! |
Description
Added a keyboard shortcut help panel to improve shortcut discoverability in the video editor.
Changes made:
Created KeyboardShortcutPanel.tsx
Added a ? help button in the editor UI
Added keyboard shortcut toggle using the ? key
Added modal/drawer UI listing all supported shortcuts:
Cmd/Ctrl + Enter → Start export
Space → Play / pause preview
? → Toggle shortcut panel
Escape → Close overlay / cancel
Integrated panel into VideoEditor.tsx
Added keyboard handler updates in useVideoEditor.ts
Related Issue
Closes #655
Type of Contribution
Participant Info
Screenshot
Screen Recording
Reframe.Resize.trim.and.export.videos.in.your.browser.-.Google.Chrome.2026-05-22.01-33-47_compressed.mp4
Checklist
bun run lintpasses (no ESLint errors)bunx tsc --noEmitpasses (no TypeScript errors)aria-label/ accessible namesconsole.logstatements left in